<template>
    <el-dialog
        class="searchDialog"
        :visible.sync="value"
        title="红字信息确认单查询"
        :before-close="handleClose"
        :modal-append-to-body="false"
        width="100%"
    >
        <div class="diskInfoWrap">
            <el-form
                :model="searchData"
                size="small"
                label-width="140px"
                class="formInline"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="红字确认单编号：" label-width="120px">
                            <el-input
                                v-model="
                                    searchData.hzfpxxqrdbh
                                "
                                maxlength="20"
                                placeholder="请输入"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="红冲原因："  label-width="100px">
                            <selectCom
                                v-model="searchData.chyydm"
                                :options="[
                                    { label: '开票有误', value: '01' },
                                    { label: '销货退回', value: '02' },
                                    { label: '服务中止', value: '03' },
                                    { label: '销售折让', value: '04' },
                                ]"
                                style="width: 100%"
                            ></selectCom>
                        </el-form-item>
                    </el-col>

                    <el-col :span="9">
                        <el-form-item label="蓝字发票开票日期：">
                                <el-date-picker
                                    v-model="selectDate"
                                    type="daterange"
                                    align="right"
                                    format="yyyy-MM-dd"
                                    value-format="yyyy-MM-dd"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    >
                                </el-date-picker>

                        </el-form-item>
                    </el-col>

                    <el-col :span="3">
                        <div style="float: right" class="searchClass">
                            <el-button
                                size="small"
                                type="primary"
                                @click="getList"
                            >
                                查询
                            </el-button>
                            <span style="display:inline-block;width:10px;"></span>
                            <el-button
                                size="small"
                                type="primary"
                                @click="reset"
                            >
                                重置
                            </el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="6">
                        <el-form-item label="红字确认单状态：" label-width="120px">
                            <selectCom
                                v-model="searchData.hzqrxxztdm"
                                :options="[
                                    { label: '销方录入待购方确认', value: '02' },
                                    { label: '购方录入待销方确认', value: '03' },
                                    
                                ]"
                                style="width: 100%"
                            ></selectCom>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="蓝字发票号码："  label-width="100px">
                            <el-input
                                v-model="
                                    searchData.lzfphm
                                "
                                placeholder="请输入"
                                maxlength="20"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="红字确认单申请日期："
                        >
                            <el-date-picker
                                :disabled="true"
                                style="width:45%;"
                                    v-model="searchData.hzqrdsqrqq"
                                    type="datetime"
                                    :clearable="false"

                                    placeholder="选择日期"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    >
                                </el-date-picker>
                                <span style="display:inline-block;margin: 0 4px;">至</span>
                                <el-date-picker
                                :disabled="true"

                                    style="width:45%;"
                                    :clearable="false"
                                    v-model="searchData.hzqrdsqrqz"
                                    type="datetime"
                                    placeholder="选择日期"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    >
                                </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <div style="float: right">
                            <el-button
                                size="small"
                                type="primary"
                                @click="getRedConfirm"
                            >
                                获取红字确认单
                            </el-button>
                        </div>
                    </el-col>
                </el-row>

                <el-row>

                </el-row>
            </el-form>

            <tableList
                ref="tableRef"
                border
                heightMin="200"
                :keySet="keySet"
                :autoHeight="true"
                :tableData="listDetails"
                :paginationShow="true"
                :pageNumber="searchData.pageNo"
                :pageSize="searchData.pageSize"
                :total="searchData.total"
                :radioSelect="true"
                @radioHandleCurrentChange="radioHandleCurrentChange"
                @handleSizeChange="handleSizeChange"
                @handleCurrentChange="handleCurrentChange"
            >
                <template #hzqrxxztdm="{ row }">
                    <div >
                        {{ row.hzqrxxztdm == '02' ? '销方录入待购方确认': '购方录入待销方确认'}}
                    </div>
                </template>
                <template #chyydm="{ row }">
                    <div >
                        {{ chyyMap[row.chyydm] }}
                    </div>
                </template>
            </tableList>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose" size="small">取 消</el-button>
            <el-button type="primary" @click="confirm" size="small">
                确 定
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
import tableList from '@/components/tableList/index.vue'
import selectCom from '@/components/selectCom.vue'
import { pageHzqrd, getHzqrd } from '@/api/vmsHzqrdConfirm.js'
import { formaDate } from '@/utils/getTime.js'

export default {
    name: 'searchDialogConfirm',
    model: {
        prop: 'value',
        event: 'searchCb',
    },
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        redConfigNumber: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            selectDate:['',''],
            chyyMap:{
                "01":"开票有误",
                "02":"销货退回",
                "03":"服务中止",
                "04":"销售折让",
            },
            searchData:{
                "hzfpxxqrdbh": "",
                "chyydm": "",
                "lzfpkprqq": "",
                "lzfpkprqz": "",
                "hzqrxxztdm": "",
                "lzfphm": "",
                "hzqrdsqrqq": "",
                "hzqrdsqrqz": "",


                "creatBy": "",
                "lrrqq": "",
                "lrrqz": "",
                "pageNo": 1,
                "pageSize": 10,
                total:0
            },


            selectRow: null,

            timer: null,

            listDetails: [

            ],
            keySet: [
                {
                    label: '红字确认单编号',
                    englishName: 'hzfpxxqrdbh',
                },
                {
                    label: '红字确认单状态',
                    englishName: 'hzqrxxztdm',
                    isSlot: true,
                    slotName: 'hzqrxxztdm',
                    width: 120

                },
                {
                    label: '红冲原因',
                    englishName: 'chyydm',
                    isSlot: true,
                    slotName: 'chyydm',
                },
                {
                    label: '蓝字发票号码',
                    englishName: 'lzfphm',
                    width: '150',
                },
                {
                    label: '蓝字发票开具日期',
                    englishName: 'lzkprq',
                    width: 'labelWidth',
                },
                {
                    label: '红字信息确认单申请日期',
                    englishName: 'lrrq',
                    width: 'labelWidth',
                },
                {
                    label: '价税合计金额',
                    width: 'labelWidth',
                    englishName: 'lzjshj',
                },
                {
                    label: '税额',
                    englishName: 'lzhjse',
                },
                {
                    label: '冲销金额',
                    englishName: 'hzcxje',
                    width: 150,
                },
                {
                    label: '冲销税额',
                    englishName: 'hzcxse',
                    width: 150,
                },
            ],
        }
    },
    mounted() {
        // this.searchData.hzfpxxqrdbh = this.redConfigNumber;
        // console.log(this.redConfigNumber);
        this.getDefaultTime();
        this.getList()
    },
    methods: {
        async getRedConfirm(){
            let { code ,data} = await getHzqrd();
            if(code ==200){
                this.$message({
                    type: 'success',
                    message: data,
                    duration: 10000,
                    showClose:true
                })
                this.getList()
            }
        },
        getDefaultTime () {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
            this.searchData.hzqrdsqrqq = formaDate(start)
            this.searchData.hzqrdsqrqz = formaDate(end)
        },

        reset(){
            this.selectDate = ['','']
            this.searchData = {
                "hzfpxxqrdbh": "",
                "chyydm": "",
                "lzfpkprqq": "",
                "lzfpkprqz": "",
                "hzqrxxztdm": "",
                "lzfphm": "",
                "hzqrdsqrqq": "",
                "hzqrdsqrqz": "",


                "creatBy": "",
                "lrrqq": "",
                "lrrqz": "",
                "pageNo": 1,
                "pageSize": 10,
                total:0
            }
            this.getDefaultTime()
        },
        confirm() {
            if (this.selectRow === null) {
                return this.$message.warning('请至少选择一条记录')
            }
            this.handleClose()
        },
        // handleSelectionChange(row) {
        //     console.log(row);
        //     if(row.ids&&(row.ids.length === 1)){
        //         return this.selectRow = row.ids[0];
        //     }else if(row.ids&&(row.ids.length === 2)){
        //         this.selectRow = {...row.ids[1]};
        //         this.$refs.tableRef.$refs.table.toggleRowSelection(row.ids[0],false)
        //         console.log(this.selectRow);
        //     }else if(row.ids&&(row.ids.length === 0)){
        //         this.selectRow = null;
        //     }
        // },
        radioHandleCurrentChange(row) {
            this.selectRow = row;
        },
        handleSizeChange(val){
            this.searchData.pageSize = val;
            this.getList()

        },
        handleCurrentChange(val){
            console.log(val);
            this.searchData.pageNo = val;
            this.getList()
        },
        handleClose() {
            let obj = {
                show: false,
            }
            if (this.selectRow) {
                obj.row = this.selectRow
            }
            this.$emit('searchCb', obj)
        },
        async fn() {
            console.log(this.searchData)

            let { data,code }= await pageHzqrd({
                ...this.searchData,
                lzfpkprqq:this.selectDate[0],
                lzfpkprqz:this.selectDate[1],
            });
            if(code ==200){
                console.log(data);
                this.listDetails = data.records;
                this.searchData.pageNo = data.current;
                this.searchData.pageSize = data.size
                this.searchData.total = data.total;
                try {
                            this.$refs.tableRef.$refs.table.setCurrentRow();
                        } catch (error) {
                            
                        }
            }
        },
        async getList() {
            if (this.timer) return
            this.timer = setTimeout(() => {
                this.fn()
                clearTimeout(this.timer)
                this.timer = null
            }, 500)
        },
    },
    components: {
        tableList,
        selectCom,
    },
}
</script>

<style lang = "scss" scoped>
@import '@/style/variables.scss';
.diskInfoWrap {
    .formInline{
        box-sizing: border-box;
    padding: 0 10px;
    }
    .redBG {
        background-color: red;
        color: #fff;
        border-radius: 10px;
        text-align: center;
        line-height: 150%;
    }

    .bg {
        text-align: center;
    }
    ::v-deep .el-table__header .el-checkbox{
        display: none;
    }
}

::v-deep .el-dialog {
    margin: 0 auto !important;
}
::v-deep .el-dialog__body {
    padding:0px;
}
.formInline :deep .el-form-item--small {
    margin-bottom: 4px;

}
.searchClass .el-button--small{
    padding: 9px 13px;
}
</style>
